<template>
  <el-form-item v-if="props.data.vModel !== undefined" v-show="false" label="字段名">
    <el-input v-model="props.data.vModel" placeholder="请输入字段名（v-model）" />
  </el-form-item>
  <!-- <el-form-item
            v-if="props.data.componentName!==undefined"
            label="组件名"
          >{{ props.data.componentName }}</el-form-item> -->
  <el-alert v-if="props.data.description" type="info">{{ props.data.description }}</el-alert>
  <el-form-item v-if="props.data.label !== undefined" label="标题">
    <el-input v-model="props.data.label" placeholder="请输入标题" />
  </el-form-item> 
  <el-form-item label="默认值" v-if="props.data.layout!=='rowFormItem'&&props.data.layout!==undefined&&!props.data.customDefaultValue" >
    <el-input v-if="props.data.tag === 'my-text'" v-model="props.data.defaultValue" placeholder="请输入文本内容" />

    <component v-else :is="props.data.tag" v-model="props.data.defaultValue" style="width:100%" v-bind="props.data"> </component>
  </el-form-item>
  <el-form-item v-if="props.data.placeholder !== undefined" label="占位提示">
    <el-input v-model="props.data.placeholder" placeholder="请输入占位提示" />
  </el-form-item>
  <el-form-item v-if="props.data['start-placeholder'] !== undefined" label="开始占位">
    <el-input v-model="props.data['start-placeholder']" placeholder="请输入占位提示" />
  </el-form-item>
  <el-form-item v-if="props.data['end-placeholder'] !== undefined" label="结束占位">
    <el-input v-model="props.data['end-placeholder']" placeholder="请输入占位提示" />
  </el-form-item>

  <el-form-item v-if="props.data.label !== undefined" label="显示标签">
    <el-switch v-model="props.data.showLabel" />
  </el-form-item>

  <el-form-item v-if="props.data.range !== undefined" label="范围选择">
    <el-switch v-model="props.data.range" @change="rangeChange" />
  </el-form-item>

  <el-form-item v-if="props.data.showChinese !== undefined" label="显示大写">
    <el-switch v-model="props.data.showChinese" />
  </el-form-item>

  <el-form-item
    v-if="
      props.data.size !== undefined &&
      (props.data.optionType === 'button' || props.data.border || props.data.tag === 'el-color-picker' || props.data.tag === 'el-button')
    "
    label="组件尺寸"
  >
    <el-radio-group v-model="props.data.size">
      <el-radio-button label="large">较大</el-radio-button>
      <el-radio-button label="default">默认</el-radio-button>
      <el-radio-button label="small">较小</el-radio-button>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="作为摘要" v-if="props.data.asSummary !== undefined">
    <el-switch v-model="props.data.asSummary" />
  </el-form-item>

  <el-form-item v-if="props.data.cmpType === 'custom'" label="组件说明">
    <el-input type="textarea" v-model="props.data.explain" />
  </el-form-item>

  <el-form-item label="对齐方式" v-if="props.data.textAlign !== undefined">
    <el-radio-group v-model="props.data.textAlign">
      <el-radio-button label="left">左对齐</el-radio-button>
      <el-radio-button label="center">居中</el-radio-button>
      <el-radio-button label="right">右对齐</el-radio-button>
    </el-radio-group>
  </el-form-item>

  <el-form-item v-if="props.data['preWrap'] !== undefined" label="自动换行">
    <el-switch v-model="props.data['preWrap']" />
  </el-form-item>

  <el-form-item v-if="props.data['show-word-limit'] !== undefined" label="输入统计">
    <el-switch v-model="props.data['show-word-limit']" />
  </el-form-item>

  <el-form-item v-if="props.data.readonly !== undefined" label="是否只读">
    <el-switch v-model="props.data.readonly" />
  </el-form-item>
  <el-form-item v-if="props.data.disabled !== undefined" label="是否禁用">
    <el-switch v-model="props.data.disabled" />
  </el-form-item>

  <el-form-item v-if="props.data.show !== undefined" label="是否顯示">
    <el-switch v-model="props.data.show" />
  </el-form-item>

  <el-form-item v-if="props.data.showTip !== undefined" label="显示提示">
    <el-switch v-model="props.data.showTip" />
  </el-form-item>
  <el-form-item v-if="props.data.required !== undefined" label="是否必填">
    <el-switch v-model="props.data.required" @change="requireChange" :disabled="!props.couldChangeRequire" />
  </el-form-item>

  <el-form-item v-if="props.data.options && props.data.options.length > 0" label="范围选择">
    <div v-for="(item,index) in props.data.options">
      标签名：<el-input style="width: 30%" v-model="item.label" />
      值： <el-input style="width: 30%" v-model="item.value" />
      <a style="font-size: 12px;color: #f56c6c;cursor: pointer" @click="props.data.options = props.data.options.filter((_item,_index) => _index != index)">删除</a>
    </div>
    <a style="font-size: 12px;color: #38adff;cursor: pointer" @click="props.data.options.push({label: '',value: ''})">新增</a>
  </el-form-item>

  <el-form-item v-if="props.data.showDivider !== undefined" label="显示分割线">
    <el-switch v-model="props.data.showDivider" />
  </el-form-item>
</template>

<script setup>
import IconsDialog from '../IconsDialog.vue'
const props = defineProps(['data', 'couldChangeRequire'])

const multipleChange = (val) => {
  props.data['defaultValue'] = val ? [] : ''
}

const notObject = (val) => {
  return val === null || val === undefined || Object(val) !== val
}

const addReg = () => {
  props.data.regList.push({
    pattern: '',
    message: '',
  })
}
</script>
